<template>
  <el-dialog
    v-model="dialog"
    :width="width"
    align-center
    :close-on-click-modal="false"
  >
    <template #header>{{title}}</template>
    <template #default>
      <slot></slot>
    </template>
    <template #footer v-if="footer">
      <el-button @click="handleOk" type="primary">{{okText}}</el-button>
      <el-button @click="handleCancel">{{cancelText}}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "Modal"
}
</script>

<script setup lang="ts">
import {onMounted, ref, watch, withDefaults} from "vue"


const dialog = ref<boolean>(false)

const emits = defineEmits<{
  (e: "update:modelValue", bool: boolean): void
  (e: "ok"): void,
  (e: "cancel"): void
}>()

// noinspection TypeScriptValidateTypes
const props = withDefaults(defineProps<{
  title: string
  width: string|number
  footer: boolean
  okText: string
  cancelText: string
  modelValue: boolean
}>(), {
  title: "怒号",
  width: 500,
  footer: true,
  okText: "确定",
  cancelText: "取消",
  modelValue: false
})

const handleCancel = () => {
  emits("cancel")
}

const handleOk = () => {
  emits("ok")
}

// 监听父组件vmodel数据变换
watch(() => props.modelValue, (newValue) => {
  dialog.value = newValue
})
// 监听
watch(dialog, (newValue) => {
  emits("update:modelValue", newValue)
})

onMounted( () => {

} )
</script>

<style scoped lang="scss">

</style>
